<template>
  <div class="overview-card-demo">
    <h2>Overview Card Demo</h2>
    
    <div class="card-grid">
      <OverviewCard
        icon="shopping-cart"
        title="今日订单"
        :value="158"
        :growth="12.5"
      />
      
      <OverviewCard
        icon="user-tie"
        title="总经销商用户数量"
        :value="342"
        :growth="5.8"
      />
      
      <OverviewCard
        icon="users-cog"
        title="总代理数量"
        :value="872"
        :growth="-3.2"
      />
      
      <OverviewCard
        icon="shopping-bag"
        title="产品总数"
        :value="1254"
        :growth="0"
        :showGrowth="false"
      />
      
      <OverviewCard
        icon="coins"
        title="今日付款金额"
        :value="24685.75"
        :growth="8.4"
        prefix=""
        suffix=" USDT"
      />
      
      <OverviewCard
        icon="money-bill-wave"
        title="总收入"
        :value="1256893.42"
        :growth="15.7"
        prefix=""
        suffix=" USDT"
      />
      
      <OverviewCard
        icon="clipboard-list"
        title="待处理提款申请金额"
        :value="58974.32"
        :growth="-7.8"
        prefix=""
        suffix=" USDT"
      />
      
      <OverviewCard
        icon="hand-holding-usd"
        title="总提款金额"
        :value="875421.67"
        :growth="4.2"
        prefix=""
        suffix=" USDT"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import OverviewCard from './OverviewCard.vue';
</script>

<style scoped>
.overview-card-demo {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

h2 {
  margin-bottom: 24px;
  color: #32325d;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1400px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1100px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}
</style> 
 